<template>
  <!-- 深度选择器`:deep()`伪类 -->
  <button @click="componentName='DeepParent'">深度选择器</button>

  <!-- 插槽选择器`:slotted`伪类 -->
  <button @click="componentName='SlottedParent'">插槽选择器</button>

  <!-- 全局选择器`:global`伪类 -->
  <button @click="componentName=['GlobalComponent1','GlobalComponent2']">全局选择器</button>

  <!-- v-bind()用于为样式设置CSS变量值 -->
  <button @click="componentName='CSSVBind'">设置CSS变量值</button>

  <component v-if="typeof componentName === 'string'" :is="componentName"/>
  <component v-else v-for="item in componentName" :is="item"></component>
</template>

<script>
import {defineComponent} from 'vue';
import DeepParent from '@/components/deep/DeepParent.vue';
import SlottedParent from '@/components/slotted/SlottedParent.vue';
import GlobalComponent1 from '@/components/global/GlobalComponent1.vue';
import GlobalComponent2 from '@/components/global/GlobalComponent2.vue';
import CSSVBind from '@/components/CSSVBind.vue';

export default defineComponent({
  components: {CSSVBind, GlobalComponent2, GlobalComponent1, SlottedParent, DeepParent},
  data() {
    return {
      componentName: ''
    };
  }
});
</script>

<style scoped>
button {
  margin-right: 10px;
  margin-bottom: 20px;
}
</style>
